iT邦幫忙

2024 iThome 鐵人賽

DAY 8
0
佛心分享-IT 人自學之術

HTML&CSS網頁設計學習心得系列 第 8

Day8:製作HTML 表格和表單

  • 分享至 

  • xImage
  •  

HTML 表格和表單是網頁中常用的元素。表格用於顯示結構化數據,而表單則用於收集用戶輸入的數據。

一、製作表格
HTML 表格使用 <table> 標籤來創建。表格通常包含以下幾個重要的子標籤:

<tr>:表示表格中的行。
<th>:表示表格中的表頭單元格,通常用來顯示列的標題。
<td>:表示表格中的數據單元格。
表格範例:

<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年齡</th>
            <th>城市</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>25</td>
            <td>台北</td>
        </tr>
        <tr>
            <td>小華</td>
            <td>30</td>
            <td>高雄</td>
        </tr>
    </tbody>
</table>

在這個範例中,使用 <table> 創建了一個表格,表格包含三列:姓名、年齡和城市。<thead> 用於定義表頭,<tbody> 用於定義表格的主體部分。

二、製作表單
HTML 表單使用 <form> 標籤來創建。表單通常包含各種輸入元素,例如文本框、單選按鈕、複選框等,這些元素可以讓用戶輸入數據。
表單範例:

<form action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required><br>

    <label for="age">年齡:</label>
    <input type="number" id="age" name="age" required><br>

    <label for="city">城市:</label>
    <select id="city" name="city">
        <option value="taipei">台北</option>
        <option value="kaohsiung">高雄</option>
        <option value="taichung">台中</option>
    </select><br>

    <input type="submit" value="提交">
</form>

在這個範例中,<form> 標籤包裹了所有輸入元素。action 屬性指定了表單數據提交的 URL,method 指定了使用的 HTTP 方法(如 POST)。表單中包括姓名和年齡的文本框,以及城市的下拉選單,最後有一個提交按鈕。


上一篇
Day7:HTML檔案的架構
下一篇
Day9:用區塊元素將內容分組
系列文
HTML&CSS網頁設計學習心得12
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言